<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
</script>




<div id="main">



    <p style="color: green"><%= flash[:notice] %></p>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">蔬菜</a></li>
        <li><a href="#tabs-2">肉类</a></li>
        <li><a href="#tabs-3">调味料</a></li>
      </ul>
      <div id="tabs-1" style="filter: Alpha(Opacity=50)">
        <p>这里显示各种蔬菜</p>
        <div class="div_inline">
        <% @base_vegetables.each do |vege|  %>          
            <dl class="stove">
              <dt><%=vegetable_img(vege) %></dt>
              <dd><%= link_to '购买+1', buy_materials_path(vege), :class => "a_button" %></dd>
            </dl>
        <% end # of for %>
        </div>

      </div>
      <div id="tabs-2">
        <p>这里显示肉类</p>
        <div class="div_inline">
        <% @base_meat.each do |meat|  %>
            <dl class="stove">
              <dt><%=meat_img(meat) %></dt>
              <dd><%= link_to '购买+1', buy_materials_path(meat), :class => "a_button" %></dd>
            </dl>
        <% end # of for %>
        </div>
      </div>
      <div id="tabs-3">
        <p>这里显示调味料</p>
        <div class="div_inline">
        <% @base_spices.each do |spice|  %>
            <dl class="stove">
              <dt><%=spice_img(spice) %></dt>
              <dd><%= link_to '购买+1', buy_spices_path(spice), :class => "a_button" %> </dd>
            </dl>
        <% end # of for %>
        </div>
      </div>
    </div>

</div> <!-- of <div id="main"> -->

